腾讯地图JavaScript API获取经纬度

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

腾讯位置服务 JavaScript API

加载地图 API

https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsQuick

1
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

其中，v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持。Key参数YOUR_KEY是Key鉴权中申请的key。

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function initMap() {
  const center = new window.qq.maps.LatLng(DefaultLatitude, DefaultLongitude);
  const mapOptions = {
    zoom: 12,
    mapTypeId: window.qq.maps.MapTypeId.ROADMAP,
    center: center
  };

  map = new window.qq.maps.Map(mapEle, mapOptions);
  marker = new window.qq.maps.Marker({
    position: center,
    map: map
  });
}

marker标记

1
2
3
4
marker = new window.qq.maps.Marker({
    position: center,
    map: map，
});

清除标记：

1
2
3
4
5
function clearMarker() {
  if (marker && marker.getMap()) {
    marker.setMap(null);
  }
}

添加地图点击事件

事件

点击地图事件

1
2
3
4
5
6
7
8
9
10
11
12
13
function clickMapListener() {
  listener = window.qq.maps.event.addListener(map, "click", (event) => {
    // 获取点击位置的地理坐标属性latLng
    const { latLng } = event;
    clearMarker();
    marker = new window.qq.maps.Marker({
      position: latLng,
      map: map
    });
    const lng = Number(latLng.getLng());
    const lat = Number(latLng.getLat());
  });
}

移除事件：

1
window.qq.maps.event.removeListener(listener)

修改地图中心点

地图显示控制

通过调用setCenter方法可对地图中心点进行修改

1
2
3
4
5
6
var map = new TMap.Map('container', { //初始化地图
    center: new TMap.LatLng(39.984120,116.307484),  //设置地图初始中心点
    zoom:11,   //设置地图缩放级别
});
//修改地图中心点
map.setCenter(new TMap.LatLng(lat,lng));

根据地址获取坐标

地址解析 Geocoder

地址解析类用于在地址和经纬度之间进行转换的服务

官方 demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getCoordsFromAddress(address) {
  if (!geocoder) {
    geocoder = new window.qq.maps.Geocoder();
  }
  const trimAddress = address ? address.trim() : "";
  const geoAddress = trimAddress || DefaultAddress;
  geocoder.getLocation(geoAddress);
  geocoder.setComplete((result) => {
    const { location } = result.detail;
    const { lng, lat } = location;
    // console.log(lng, lat)
    map.setCenter(location);
    clearMarker();
    marker = new window.qq.maps.Marker({
      map: map,
      position: location
    });
  
  });
  geocoder.setError(() => {
    // ...
  });
}

隐藏控件

1
2
3
4
const mapOptions = {
    // ...
    disableDefaultUI: true, // 隐藏所有控件
}

Demo

See the Pen 腾讯地图JavaScriptAPI by ly023 (@ly023) on CodePen.